import {StyleSheet, Text, View} from "react-native";
import React, {useMemo} from "react";
import {FileViewer} from "../../../components/FileViewer.tsx";

export function MainForm({sealInfo, processNodes}: any) {
    const reason = (processNodes.findLast((node: any) =>
        node.name === "单位负责人"))?.tasks[0]?.reason || "";

    const docsToView = useMemo(() => {
        if (!sealInfo?.attachments) return [];
        return sealInfo.attachments.map((att: any) => ({
            url: att.attachmentUrl,
            name: att.attachmentName,
            size: att.attachmentSize,
        }));
    }, [sealInfo.attachments]);

    return (
        <View style={styles.detailContainer}>
            <Text style={styles.detailTitle}>{sealInfo.applyTitle}</Text>
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>材料名称</Text>
                <Text style={styles.detailValue}>{sealInfo.materialName}</Text>
            </View>
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>材料类型</Text>
                <Text style={styles.detailValue}>{sealInfo.materialType === "1" ? '非合同类' :
                    sealInfo.materialType === "2" ? '合同类，未经法务办审核' : '合同类，经法务办审查'}</Text>
            </View>
            {(sealInfo.sealTypes) && <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>印章类型</Text>
                <View style={{alignItems: 'flex-start'}}>
                    {sealInfo.sealTypes.map((seal:any, index:number) => (
                        <Text key={index} style={styles.detailValue}>{seal.name} × {seal.quantity}</Text>
                    ))}
                </View>
            </View>}
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>经办人</Text>
                <Text style={styles.detailValue}>{sealInfo.signers.split("，")[0]}</Text>
            </View>
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>审核人</Text>
                <Text style={styles.detailValue}>{sealInfo.signers.split("，")[1]}</Text>
            </View>
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>电话</Text>
                <Text style={styles.detailValue}>{sealInfo.phone}</Text>
            </View>
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>单位负责人审核意见</Text>
                <Text style={styles.detailValue}>{reason || ""}</Text>
            </View>
            <View style={styles.detailRow}>
                <Text style={styles.detailLabel}>附件</Text>
                <View style={styles.detailValue}>
                    <FileViewer files={docsToView} />
                </View>
            </View>
            <View style={[styles.detailRow, {borderBottomWidth: 0}]}>
                <Text style={styles.detailLabel}>备注</Text>
                <Text style={styles.detailValue}>{sealInfo.attention || '无'}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    headContainer: {
        backgroundColor: '#fff',
        padding: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        elevation: 0.9,
    },
    detailContainer: {
        backgroundColor: '#fff',
        paddingHorizontal: 20,
        paddingVertical: 15,
        margin: 8,
        borderRadius: 8,
        elevation: 0.9,
    },
    detailTitle: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        paddingBottom: 10,
        textAlign: 'center',
    },
    detailRow: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    detailLabel: {
        fontSize: 15,
        color: '#666',
        width: 90,
    },
    detailValue: {
        fontSize: 15,
        color: '#333',
        fontWeight: '500',
        textAlign: 'left',
        flex: 1,
    },
    img: {width: 230, height: 230, marginBottom: 10},
})
